一、一般點擊 Icon 顯示日曆

html

<!-- [owlDateTime] 將 dt2 日曆的值綁定到 input 的 value -->
<input [owlDateTime]="dt2" placeholder="請輸入日期和時間">
<!-- [owlDateTimeTrigger] 開啟 dt2 日曆 -->
<mat-datepicker-toggle [owlDateTimeTrigger]="dt2"></mat-datepicker-toggle>
<!-- 日曆的本體 -->
<owl-date-time #dt2></owl-date-time>

二、點擊 輸入框 顯示日曆

html

<input [owlDateTime]="dt2" [owlDateTimeTrigger]="dt2" placeholder="請輸入日期和時間">
<owl-date-time #dt2></owl-date-time>

三、設定起始日期和時間到顯示日曆

html

<input [owlDateTime]="dt2" [owlDateTimeTrigger]="dt2" placeholder="請輸入日期和時間">
<owl-date-time [startAt]="startAt" #dt2></owl-date-time>

ts

export class AppComponent {
    startAt = new Date("2020/08/30 15:00");
}

owl-date-time element 屬性和事件